<template>
<!-- 病人卡主div -->
<div class='patientcard-border'>
    <div class='patientcard-main' @click='choosePatient' ref='divMain'> 
      <!-- 头像div -->
      <div class='divHeadIcon patientcard-img'>
      <img :src ='imgUrl' />
      </div>
      <!-- 病人信息div -->
      <div class='patientcard-info'>
        <h3>{{ patient.patientName }}</h3>
        <p v-if='detailShowFlag'>证件号：{{ patient.idcardNum }}</p>
        <p v-if='detailShowFlag'>手机号：{{ patient.phone }}</p>
        <p>门诊号：{{ patient.patientNo }}</p>
        <p>住院号：{{ patient.ipatientNo }}</p>
      </div>
      <!-- 二维码和右箭头 -->
      <div class ='patientcard-plus'>
        <!-- 这两个div是用来确保二维码和右箭头始终居中，patientcard-space 会随着证件号和手机号一同隐藏出现 -->
        <div class ='patientcard-space0'></div>
        <div class ='patientcard-space' v-if='detailShowFlag'></div>
        <img :src = 'barcodeUrl'/>
        <img :src = 'rightIconUrl'/>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {util} from '../../utils/util.js'
export default {
  data () {
    return {
      baseinfo: 'info',
      imgUrl: require('../../assets/patientimg1.jpg'),
      rightIconUrl: require('../../assets/rightIcon.jpg'),
      barcodeUrl: require('../../assets/barcode.jpg'),
    }
  },
  props: {
    patient: {
      patientName: '张逸风',
      iconUrl: '',
      idcardNum: '44**************22',
      phone: '13450486811',
      patientNo: '77777777',
      ipatientNo: '未绑定',
      gender: 'M',
      userId: '0',
      barcode: ''
    },
    detailShowFlag: false
  },
  methods: {
    choosePatient() {
      this.$emit('choosePatient',this.patient.userId)
    }
  },
  watch: {
    // 监视props传进来的头像url是否为空，不为空才使用该url，否则使用默认地址
    patient: function (val, oldVal) {
      console.log('触发watch')
      let url = val.iconUrl
      let emptyFlag = isEmpty(url)
      if(!emptyFlag) {
        imgUrl = url
      } else {
        imgUrl = require('../../assets/patientimg1.jpg')
      }
      // 二维码图片
      let barcode = val.barcode
      let barcodeFlag = isEmpty(barcode)
      if(!barcodeFlag) {
        barcodeUrl = barcode
      } else {
        barcodeUrl = require('../../assets/barcode.jpg')
      }
    }
  }
}
</script>

<style scoped>
.patientcard-border {
  border:1px solid darkgray;
  background-color: white;
  /* margin: 5px 0; */
}
.patientcard-main {
  margin: 15px 0px 15px 15px;
  overflow: hidden;
}
/* 头像 */
.patientcard-img {
  /* width: 70px; */
  margin: 0;
  padding: 0;
  float: left;
  width: 16%;
  text-align: left;
}
/* 信息主体 */
.patientcard-info {
  padding-left: 10px;
  height: 100%;
  float: left;
  text-align: left;
  width: 62%;
}

/* 二维码和右标签 */
.patientcard-plus {
  width: 18%;
  float: right;
}
.patientcard-plus img {
  height: 25px;
  width: 25px;
}

/* 二维码与上方的固定距离，通过 （li - div padding - 二维码高度） / 2 计算出 */
.patientcard-space0 {
  height: 25px;
}
/* 与上面的height之和为显示证件号，手机号以后的二维码居中依赖 */
.patientcard-space {
  height: 21px;
}

h3,p{
  margin: 0;
}

p {
  padding-top: 5px;
  font-size: 14px;
}
</style>